<template>
  <div class="Worker">
  <el-container>
    <el-header style="width:100%;margin-top: 30px;">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-form-item label="姓名" >
          <el-input v-model="formInline.workerName" placeholder="姓名" style="height:50px;width: 100px"></el-input>
        </el-form-item>

        <el-form-item label="工号">
          <el-input v-model="formInline.workerNum" placeholder="工号" style="height:50px;width: 100px"></el-input>
        </el-form-item>


        <el-form-item label="状态">
          <el-select v-model="formInline.workerState" placeholder="状态" style="height:50px;width: 100px">
            <el-option label="在职" value="在职"></el-option>
            <el-option label="离职" value="离职"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 450px">
          <el-button type="primary" round icon="el-icon-circle-plus" @click="onAdd">新增</el-button>
        </el-form-item>

      </el-form>





    </el-header>
    <div style="height: 1px"></div>
    <el-main style="width:70%;margin: 0 auto;margin-top:5px;height:100%;margin-left:250px">
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="workerNum"
            label="工号"
            width="80">
        </el-table-column>
        <el-table-column
            prop="workerName"
            label="姓名"
            width="80">
        </el-table-column>
        <el-table-column
            prop="workerGender"
            label="性别"
            width="80">
        </el-table-column>
        <el-table-column
            prop="workerIdNum"
            label="身份证"
            width="200">
        </el-table-column>
        <el-table-column
            prop="workerAddress"
            label="地址"
            width="200">
        </el-table-column>
        <el-table-column
            prop="workerTelNum"
            label="联系电话"
            width="150">
        </el-table-column>
        <el-table-column
          prop="workerStartTime"
          label="入职时间"
          width="100">
      </el-table-column>

        <el-table-column
            prop="workerState"
            label="状态"
            width="78">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination @current-change='handleJump' :current-page="currPage"
                     layout="prev, pager,jumper,total,next" :total="total" :page-size="size">
      </el-pagination>
    </el-main>
  </el-container>
    <!-- 弹出框 -->
    <el-dialog title="员工信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="工号" :label-width="formLabelWidth">
          <el-input v-model="form.workerNum" autocomplete="off" :disabled="true"> </el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" >
          <el-input v-model="form.workerName" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="form.workerGender" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth">
          <el-input v-model="form.workerIdNum" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" >
          <el-input v-model="form.workerAddress" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth">
          <el-input v-model="form.workerTelNum" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="入职时间" :label-width="formLabelWidth">
          <el-input v-model="form.workerStartTime" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.workerState" placeholder="状态">
            <el-option label="在职" value="在职"></el-option>
            <el-option label="离职" value="离职"></el-option>
          </el-select>
        </el-form-item>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStudent(form);dialogFormVisible = false" >确 定</el-button>

      </el-form>
    </el-dialog>
    <!-- 弹出框 -->
    <el-dialog title="新增员工" :visible.sync="addVidible">
      <el-form :model="addForm" :rules="rules">
        <el-form-item label="性别" :label-width="formLabelWidth" required prop="workerGender">
          <el-select v-model="addForm.workerGender" placeholder="性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工号" :label-width="formLabelWidth" required prop="workerNum">
          <el-input v-model="addForm.workerNum" autocomplete="off" required> </el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="workerName" required>
          <el-input v-model="addForm.workerName" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth" prop="workerIdNum" required>
          <el-input v-model="addForm.workerIdNum" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="workerAddress" required>
          <el-input v-model="addForm.workerAddress" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="workerTelNum" required>
          <el-input v-model="addForm.workerTelNum" autocomplete="off" ></el-input>
        </el-form-item>
        <el-button @click="addVidible = false">取 消</el-button>
        <el-button type="primary" @click="addWorker(addForm);addVidible = false" >确 定</el-button>
      </el-form>
    </el-dialog>
  </div>

</template>


<script>
 import axios from "axios";
 import qs from "qs";
export default {
  name: "Worker",
  methods: {
    handleClick:function(form) {
      console.log(form);
      this.form=form;
      this.dialogFormVisible=true;

    },
    onAdd:function (addForm){
      this.form=addForm;
      this.addVidible=true;
    },
    // 查询的函数展示所有
    query:function(workerName,workerNum,workerState,currPage){
      var _this=this;
      axios.get("http://localhost:8081/showWorkerMessage",{
        params:{
          workerName:workerName,
          workerNum:workerNum,
          workerState:workerState,
          currPage:currPage
        }

      })
          .then(function(res){
            console.log(res);
            if(res.data.success){
              let data = res.data.data;
              _this.tableData = data.records;
              _this.total = data.total;
              _this.currPage = data.current;
              _this.size=data.size
            }else{
              _this.$message.error('请求错误' + resp.data.message);
            }
          })
          .catch(function (error) {
            this.$message('出错了'+error);
          })
    },
    //页面跳转
    handleJump(currPageIndex){
      this.query(this.formInline.workerName, this.formInline.workerNum,this.formInline.workerState, currPageIndex);
    },
    //页面搜索
    onSubmit() {
      this.query(this.formInline.workerName, this.formInline.workerNum,this.formInline.workerState, this.currPage);
    },
    //点击确定录入信息
    addWorker(addForm){
      let addWorker = JSON.stringify({
        workerNum:addForm.workerNum,
        workerName:addForm.workerName,
        workerGender:addForm.workerGender,
        workerIdNum:addForm.workerIdNum,
        workerAddress:addForm.workerAddress,
        workerTelNum:addForm.workerTelNum,

      });
      axios.post("http://localhost:8081/addWorker",addWorker,{
        headers: {
          "Content-Type": "application/json;charset=utf-8"  //头部信息
        }
      })
          .then(function (response) {
            this.$message('添加成功');
            this.query('','','',1)
          })
          .catch(function (error) {
            this.$message('添加失败'+error);
          });
    },

    // 点击修改
    updateStudent(form){
      let worker = JSON.stringify({
        workerNum:form.workerNum,
        workerName:form.workerName,
        workerGender:form.workerGender,
        workerIdNum:form.workerIdNum,
        workerAddress:form.workerAddress,
        workerTelNum:form.workerTelNum,
        workerStartTime:form.workerStartTime,
        workerState:form.workerState
      });
      axios.post("http://localhost:8081/updateWorker",worker,{
        headers: {
          "Content-Type": "application/json;charset=utf-8"  //头部信息
        }
      })
          .then(function (response) {
            this.$message('修改成功');
          })
          .catch(function (error) {
            this.$message('修改失败'+error);
          });
    },
  },

  mounted:function(){
    this.query('','','',1)
  },

  data() {
    return {
      tableData: [],
      formInline: {
        workerName: '',
        workerNum: '',
        workerState:''
      },
      // 校验输入信息
      rules:{
        workerGender:[ { required: true, message: '请选择员工性别', trigger: 'change' },],
        workerNum:[{ required: true, message: '请输入员工工号', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在2位以上', trigger: 'blur' }],
        workerName:[{ required: true, message: '请输入员工姓名', trigger: 'blur' },
          { min: 2, max: 4, message: '长度在2位以上4位以内', trigger: 'blur' }],
        workerIdNum:[{ required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 16, max: 18, message: '长度在16位到18位', trigger: 'blur' }],
        workerAddress:[{ required: true, message: '请输入员工地址', trigger: 'blur'}],
        workerTelNum:[{ required: true, message: '请输入员工联系方式', trigger: 'blur' },
          { min: 11, max:11, message: '电话号码为11位', trigger: 'blur' }]


      },
      addForm:{},
      addVidible:false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      form:{},
      total:0,
      size:0,
      currPage:1,
      value1:""
      }
    },


}
</script>

<style scoped>

</style>